<template>
	<div class="depth">
		<div class="d1">
			<div class="c1">
				<font class="c1_1">￥</font>
				<span class="c1_2">8888.88</span>
				<span class="c1_3">
					<div class="select">
						深度0<img src="../../../../static/imgs/select.png">
					</div>
					<ul class="select_ul">
						<li v-on:click="change_depth(1)" :class="{'active_li' : depth_index == '1'}">1</li>
						<li v-on:click="change_depth(2)" :class="{'active_li' : depth_index == '2'}">2</li>
						<li v-on:click="change_depth(3)" :class="{'active_li' : depth_index == '3'}">3</li>
						<li v-on:click="change_depth(4)" :class="{'active_li' : depth_index == '4'}">4</li>
						<li v-on:click="change_depth(5)" :class="{'active_li' : depth_index == '5'}">5</li>
					</ul>
				</span>
			</div>
			<label class="c1_4">
				最新价格
			</label>
		</div>
		
		<div class="d2">
			<ul class="d2_1">
				<li>
					<p>2132.213</p>
					<span>最高价</span>
				</li>
				<li>
					<p>2132.213</p>
					<span>最高价</span>
				</li>
				<li>
					<p>2132.213</p>
					<span>最高价</span>
				</li>
				<li>
					<p>2132.213</p>
					<span>最高价</span>
				</li>
			</ul>
<!--			<div class="d2_2">
				<span>最高价</span>
				<span>最低价</span>
				<span>日涨幅</span>
				<span>日成交量</span>
			</div>-->
			
			<div class="d2_2">
				<div class="d2_2_title">
					<span>买卖</span>
					<span class="textalign_center">价格</span>
					<span class="textalign_right">成交量</span>
				</div>
				<div class="d2_2_content">
					<ul class="d2_u1">
						<li>
							<span class="color_green">卖1</span>
							<span class="textalign_center">¥5896.43</span>
							<span class="textalign_right color_green">0.0945</span>
						</li>
						<li>
							<span class="color_green">卖1</span>
							<span class="textalign_center">¥5896.43</span>
							<span class="textalign_right color_green">0.0945</span>
						</li>
						<li>
							<span class="color_green">卖1</span>
							<span class="textalign_center">¥5896.43</span>
							<span class="textalign_right color_green">0.0945</span>
						</li>
						<li>
							<span class="color_green">卖1</span>
							<span class="textalign_center">¥5896.43</span>
							<span class="textalign_right color_green">0.0945</span>
						</li>
						<li>
							<span class="color_green">卖1</span>
							<span class="textalign_center">¥5896.43</span>
							<span class="textalign_right color_green">0.0945</span>
						</li>
						<li>
						</li>
						<li>
						</li>	
					</ul>
					
					<ul class="d2_u2">
						<li>
							<span class="color_red">卖1</span>
							<span class="textalign_center">¥5896.43</span>
							<span class="textalign_right color_red">0.0945</span>
						</li>
						<li>
							<span class="color_red">卖1</span>
							<span class="textalign_center">¥5896.43</span>
							<span class="textalign_right color_red">0.0945</span>
						</li>
						<li>
							<span class="color_red">卖1</span>
							<span class="textalign_center">¥5896.43</span>
							<span class="textalign_right color_red">0.0945</span>
						</li>
						<li>
							<span class="color_red">卖1</span>
							<span class="textalign_center">¥5896.43</span>
							<span class="textalign_right color_red">0.0945</span>
						</li>
						<li>
							<span class="color_red">卖1</span>
							<span class="textalign_center">¥5896.43</span>
							<span class="textalign_right color_red">0.0945</span>
						</li>
						<li>
						</li>
						<li>
						</li>	
					</ul>
				</div>
			</div>
		</div>

	</div>
</template>

<script>
	export default {
		data() {
			return {
				depth_index: 1,
			}
		}, //定义变量
		methods: {
			change_depth: function(index){
				this.depth_index = index
			}
		}
	};
</script>

<style lang="scss">
	$fontColorGary: #9b9b9b;
	$colorRed: #ee2560;
	$colorGreen: #3ac569;
	.depth {
		font-size: 12px;
		width: 317px;
		float: left;
		color: #1B1E23;
		.d1 {
			border-bottom: 1px solid #DBDBDB;
			padding: 10px 5px;
			.c1_1{
				color: #E93C6F;
				font-size:12px ;
			}
			.c1_2{
				color: #E93C6F;
				font-size: 30px;
			}
			.c1_3{
				float: right;
				position: relative;
				.select{
					width:66px;
					text-align: right;
					img{
						height: 12px;
						position: relative;
						top: 2px;
						left: 4px;
					}
				}
				.select_ul {
					display: none;
					width: 66px;
					position: absolute;
					right: -5px;
					border: 1px solid rgba(0, 147, 241, 0.37);
					li{
						font-size: 14px;
						height: 25px;
						line-height: 25px;
						text-align: center;
						background: white;
						cursor:pointer;
						&:hover{
							background:lighten(#0093F1,30%);
							color: #fff;
						}
					}
					.active_li{
						background: #0093F1;
						color: #fff;
					}
				}
			}
			.c1_3:hover{
				.select_ul {
					display: block;
				}
				
			}
			.c1_4{
				color: #9B9B9B;
			}
		}
		.d2{
			.d2_1{
				overflow: hidden;
				padding-left: 6px;
				margin-top: 15px;
				li{
					float: left;
					width: 76px;
					span{
						color: $fontColorGary;
					}
				}
			}
			.d2_2{
				.d2_2_title{
					height: 40px;
					line-height: 40px;
					margin-top: 16px;
					background: #f4f4f4;
					padding: 0 16px;
					span{
						display: inline-block;
						font-weight: bold;
						width: 90px;
						&.textalign_right{
							text-align: right;
						}
						&.textalign_center{
							text-align: center;
						}
						&.color_red{
							color: $colorRed;
						}
						&.color_green{
							color: $colorGreen;
						}
					}
				}
			}
			.d2_2_content{
				padding: 0 16px;
				.d2_u1{
					padding: 16px 0;
					border-bottom: 1px solid #dbdbdb;
					li{
						line-height: 20px;
					}
					span{
						display: inline-block;
						width: 90px;
						&.textalign_right{
							text-align: right;
						}
						&.textalign_center{
							text-align: center;
						}
						&.color_red{
							color: $colorRed;
						}
						&.color_green{
							color: $colorGreen;
						}
					}
				}
				.d2_u2{
					@extend .d2_u1;
					border-bottom: none;
				}
			}
		}
	}
</style>